import React, { Component } from "react";
import { Input } from "antd";
import { SearchOutlined } from "@ant-design/icons";
class Top extends Component {
  /* state开始 */
  state = {
    inputValue: "",
  };
  /* state结束 */
  /* 方法开始*/
  //搜索
  goToSearchPage = (e) => {
    const { value } = e.target;
    this.setState({
      inputValue: value,
    });
    window.open(`#/search/${e.target.value}`, "_self");
    // _self - URL替换当前页面
    window.open(`#/search/${value}`, "_self");
  };
  /* 方法结束*/
  render() {
    return (
      <div className="top-container">
        <div className="left-box">
          <div className="icon-wrapper">
            <span
              onClick={() => window.history.go("/")}
              className="iconfont icon-home"
            ></span>
            <span className="iconfont icon-sami-select"></span>
            <span className="iconfont icon-full-screen"></span>
          </div>
          <div className="history-wrapper">
            <span
              onClick={() => window.history.go(-1)}
              className="iconfont icon-arrow-lift"
            ></span>
            <span
              onClick={() => window.history.go(1)}
              className="iconfont icon-arrow-right"
            ></span>
          </div>
        </div>
        <div className="right-box">
          <Input
            size="small"
            onPressEnter={this.goToSearchPage}
            placeholder="搜索"
            prefix={<SearchOutlined />}
          />
        </div>
      </div>
    );
  }
}

export default Top;
